<template>
  <div class="icons">

    <swiper ref="mySwiper">     
        <swiper-slide v-for="item in pages" :key="item.id">
          
          <div class="icon"  v-for="items in item.arr" :key="items.id">
            <div class="icon-img">
              <img class="icon-img-content" :src="items.imgUrl" alt="">        
            </div>
            <p class="icon-desc">{{items.desc}}</p>
          </div> 

        </swiper-slide>             
    </swiper>      

  </div>
</template>

<script>
export default {
  name: "icons",
  props: ["iconLists"],

  data() {
    return {
      // iconList: [
      //   {
      //     _id: "01",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/piao.png",
      //     text: "景点门票",
      //   },
      //   {
      //     _id: "02",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/package.png",
      //     text: "度假",
      //   },
      //   {
      //     _id: "03",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/train.png",
      //     text: "火车票",
      //   },
      //   {
      //     _id: "04",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/flight.png",
      //     text: "机票",
      //   },
      //   {
      //     _id: "05",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/hotel.png",
      //     text: "酒店",
      //   }, 
      //   {
      //     _id: "06",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/piao.png",
      //     text: "景点门票",
      //   },
      //   {
      //     _id: "07",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/package.png",
      //     text: "度假",
      //   },
      //   {
      //     _id: "08",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/train.png",
      //     text: "火车票",
      //   },
      //   {
      //     _id: "09",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/flight.png",
      //     text: "机票",
      //   },
      //   {
      //     _id: "10",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/hotel.png",
      //     text: "酒店",
      //   },  
      //   {
      //     _id: "11",
      //     iconImg: "https://s.qunarzz.com/homenode/images/touchheader/hotel.png",
      //     text: "酒店",
      //   },      
      // ],
      
      iconList: this.iconLists,
    }
  },
  computed: {
    pages() {
      const PAGES = [];
      let i = 0;
      this.iconList.forEach((item, index) => {
        let page = Math.floor(index / 10);
        if(!PAGES[page]) {
          PAGES[page] = {
            _id: "0" + i++,
            arr: [],
          };
        }
        
        PAGES[page].arr.push(item);
      });

      return PAGES;
    }
  },
}
</script>

<style scoped>
  .icons {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 40%;
    margin-top: 5px;
  }
  .icons .swiper-container {
    height: 0px;
    padding-bottom: 40%;
  }

  .icons .icon {       
    position: relative;
    overflow: hidden;
    float: left;

    width: 20%;
    height: 0px;

    padding-bottom: 20%;
   
    text-align: center;
  }
  .icons .icon .icon-img {
    position: absolute;

    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 22px;

    padding: 5px;
    box-sizing: border-box;
    
  }

  .icons .icon .icon-img .icon-img-content {
    display: block;
    margin: auto;
    height: 100%;
  }
  .icons .icon .icon-desc {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    line-height: 22px;
    height: 22px;
    color: #333;

    /* 文字溢出 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>